<template>
  <view v-if="!loadding" :data-theme="theme()" :class="theme() || ''">
    <view class="codePage">
      <!-- 二维码 -->
      <view class="code">
        <view class="title">
          <span class="line"></span>
          <span class="text">{{ options.nickName }}</span>
          <span class="line"></span>
        </view>
        <image class="codeImage" mode="widthFix" :src="options.avatarUrl" />
      </view>
      <!-- 列表 -->
      <view class="title">
        <span class="line"></span>
        <span class="text">充值记录</span>
        <span class="line"></span>
      </view>
      <view class="list">
        <view class="listView">
          <view class="listFor" v-for="(item, key) of list" :key="key">
            <view class="time">
              <view>充值时间:</view>
              <view>{{ item.create_time }}</view>
            </view>
            <view class="time">
              <view>充值平台昵称:</view>
              <view>{{ item.payment_name }}</view>
            </view>
            <view class="time">
              <view>状态:</view>
              <view>{{ item.status_text }}</view>
            </view>
            <view class="time">
              <view>充值金额:</view>
              <view>{{ item.pay_money }}</view>
            </view>
            <view class="time">
              <view>充值金额:</view>
              <view>{{ item.point_type == 1 ? "服务金币" : "绿色金币" }}</view>
            </view>
          </view>
          <view v-if="!list.length" style="margin:30rpx auto;text-align:center">暂无数据</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      /*是否加载完成*/
      loadding: true,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      /*数据*/
      listData: [],
      list: [],
      /*默认地址id*/
      default_id: "0",
      options: {},
      page: 1,
      popup: false,
      src: "",
      platform: {},
      phone: "",
      moeny: "",
      integralList: [
        {
          name: "服务金币",
          type: 1,
        },
        {
          name: "绿色金币",
          type: 2,
        },
      ],
      integralType: "",
    };
  },
  onLoad: function (options) {
    console.log("===========options", options);
    this.options = options;
    uni.showLoading({
      title: "加载中",
    });
    /*获取地址列表*/
    this.getList();
  },
  methods: {
    /*获取数据*/
    getList() {
      let self = this;
      let dataType = self.dataType;
      self._post(
        "user.user_payment/lists",
        {
          user_id: this.options.user_id,
          status: 1,
          page:this.page
        },
        function (res) {
          self.loadding = false;
          self.list = [...self.list,...res.data.list.data];
          if (res.data.list.total > self.list.length) {
            self.page = self.page+1;
            self.getList();
          }
          uni.hideLoading();
        }
      );
    },

    /*跳转页面*/
    addAddress() {
      let delta = 1;
      if (this.options.source === "order") {
        delta = 2;
      }
      this.gotoPage("/pages/user/address/add/add?delta=" + delta);
    },
    bindPickerChange(e) {
      console.log("=======================1", e);
      this.platform = this.listData[e.detail.value * 1];
    },
    radioChange(e) {
      console.log("e", e);
      this.integralType = e.detail.value;
    },
    choseImage(e) {
      let self = this;
      let params = {
        token: uni.getStorageSync("token"),
        app_id: self.getAppId(),
      };
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album"],
        success: function (res) {
          console.log("=================", res);
          // 预览图片
          uni.uploadFile({
            url: self.websiteUrl + "/index.php?s=/api/file.upload/image", //仅为示例，非真实的接口地址
            filePath: res.tempFilePaths[0],
            name: "iFile",
            formData: params,
            success: (uploadFileRes) => {
              console.log("上传图片成功", JSON.parse(uploadFileRes.data));
              self.src = JSON.parse(uploadFileRes.data).data.file_path;
            },
            fail: (e) => {
              console.log("上传图片失败", e);
            },
          });
        },
      });
    },
    /*编辑地址*/
    editAddress(e) {
      this.gotoPage("/pages/user/address/edit/edit?address_id=" + e);
    },
    submit(e) {
      if (!this.platform.payment_id) {
        uni.showToast({
          title: "请填写充值平台",
          icon: "none",
        });
        return;
      }
      if (!this.src) {
        uni.showToast({
          title: "请上传图片",
          icon: "none",
        });
        return;
      }
      if (!this.phone) {
        uni.showToast({
          title: "请填写手机号",
          icon: "none",
        });
        return;
      }
      if (!this.moeny) {
        uni.showToast({
          title: "请填写金额",
          icon: "none",
        });
        return;
      }
      if (!this.integralType) {
        uni.showToast({
          title: "请选择金币类型",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "提交中",
      });
      let self = this;
      this._post(
        "user.user_payment/add",
        {
          pay_url: this.src,
          phone: this.phone,
          payment_id: this.platform.payment_id,
          pay_money: this.moeny,
          point_type: this.integralType,
        },
        function (res) {
          if (res.code == 1) {
            uni.hideLoading();
            uni.showToast({
              title: "提交成功",
            });
            self.integralType = "";
            self.moeny = "";
            self.phone = "";
            self.src = "";
            self.platform = {};
            self.popup = false;
          }
        }
      );
    },
    /*删除地址*/
    delAddress(e) {
      let self = this;
      wx.showModal({
        title: "提示",
        content: "您确定要移除当前收货地址吗?",
        success: function (o) {
          o.confirm &&
            self._get(
              "user.address/delete",
              {
                address_id: e,
              },
              function (result) {
                if (result.code == 1) {
                  uni.showToast({
                    title: "删除成功",
                    duration: 2000,
                  });
                  self.getData();
                }
              }
            );
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
.codePage {
  width: 100vw;
  height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.code {
  padding: 0 30rpx 30rpx;
  .swiper {
    width: 100%;
    height: 730rpx;
  }
  .codeName {
    text-align: center;
    color: #555;
  }
  .codeImage {
    margin: 0 auto;
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
  }
}
.title {
  width: 100%;
  text-align: center;
  padding-bottom: 10rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .text {
    margin: 0 20px;
  }
  .line {
    width: 150rpx;
    height: 1rpx;
    background-color: #ccc;
    display: inline-block;
  }
}
.list {
  display: flex;
  flex-direction: column;
  flex: 1;
  .listView {
    // flex: 1;
    // height: 100%;
    overflow-y: auto;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    .time {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10rpx 0;
    }
    .listFor {
      margin: 20rpx 40rpx;
      padding-bottom: 5rpx;
      border-bottom: 2rpx solid #eee;
    }
  }
}
.radioGroup {
  display: flex;
  align-items: center;
}
.sumbit {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  // height: 50rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  .sumbitPopup {
    // font-size: 25rpx;
    border-radius: 30rpx;
    background-color: #000;
    color: #fff;
    padding: 20rpx;
    margin: 0 20rpx;
    text-align: center;
  }
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column-reverse;
  .popupView {
    background-color: #fff;
    width: 100%;
    height: 900rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    box-sizing: border-box;
    padding: 30rpx;
    .popupMsg {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 30rpx;
    }
    .phone {
      border-bottom: 1rpx solid #eee;
      text-align: end;
    }
    .tp {
      width: 300rpx;
      height: 300rpx;
      text-align: center;
      line-height: 300rpx;
      border-radius: 10rpx;
      border: 2rpx solid #eee;
    }
  }
}
.up {
  animation: up 0.5s;
}
@keyframes up {
  0% {
    margin-bottom: -1700rpx;
  }
}
</style>
